<template>
  <div class="mg-t-20">
    <div class="demo-inner-divider">基本</div>
    <e-time-picker
      type="time"
      :disabled-hours="[0, 1, 2, 3, 4, 5, 10]"
      :model-value="value1"
      :editable="false"
      :disabled-minutes="[0,10,20]"
      placeholder="Select time"
      style="width: 230px;"
      @on-open-change="onOpenChange"
      @on-clickoutside="onClickOutside"
      @on-change="onChange"></e-time-picker>

    <e-time-picker type="timerange" placement="bottom-start" placeholder="Select time" style="width: 168px" />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">选择时间段</div>
    <e-time-picker
      type="timerange"
      :model-value="value2"
      :disabled-hours="[0, 1, 2, 3, 4, 5, 10]"
      :disabled-minutes="[0,10,20]"
      placeholder="Select time"
      style="width: 230px;"
      @on-change="onChange"></e-time-picker>

  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">选择固定时间</div>
    <e-select style="width:200px">
      <template #prefix>
        <e-icon size="14" type="clock" />
      </template>
      <e-option
        v-for="item in timeLists"
        :value="item.value"
        :key="item.value">
        {{ item.label }}
      </e-option>
    </e-select>
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">format改变时间的显示格式</div>
    <e-time-picker :model-value="value3" format="HH点mm分ss秒" placeholder="Select time" style="width: 168px">

    </e-time-picker >
    <e-time-picker :model-value="value4" placement="bottom-end" format="HH’mm’ss" type="timerange" placeholder="Select time" style="width: 168px"></e-time-picker>
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">选择时分</div>
    <h3>{{ value5 }}</h3>
    <e-time-picker v-model="value5" confirm format="HH:mm" placeholder="Select time" style="width: 112px" />
    <br />
    <h3>{{ value6 }}</h3>
    <e-time-picker separator="+" confirm v-model="value6" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">时间间隔</div>
    <e-time-picker :steps="[1, 15, 15]" placeholder="Select time" style="width: 112px" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">不可选时间</div>
    <e-time-picker
      :disabled-hours="[1,5,10]"
      :disabled-minutes="[0,10,20]"
      placeholder="Select time"
      style="width: 168px" />
    <e-time-picker
      hide-disabled-options
      :disabled-hours="[1,5,10]"
      :disabled-minutes="[0,10,20]"
      placeholder="Select time"
      style="width: 168px" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">带有确认操作</div>
    <e-time-picker confirm :isShowCancel="false" @on-ok="onOk" @on-clear="onClear" placeholder="Select time" style="width: 168px" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">尺寸</div>
    <e-time-picker size="small" placeholder="Select time" />
    <e-time-picker size="middle" placeholder="Select time" />
    <e-time-picker size="large" placeholder="Select time" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">十二小时制时间选择器</div>
    <e-time-picker
      type="time"
      confirm
      duodecimal
      placeholder="Select time"
      style="width: 230px;"
      @on-open-change="onOpenChange"
      @on-clickoutside="onClickOutside"
      @on-change="onChange"></e-time-picker>
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">可以选择当前时间的时间选择器</div>
    <e-time-picker presently confirm @on-ok="onOk" @on-pick-just-now="onPickJustNow" @on-clear="onClear" placeholder="Select time" style="width: 168px" />
    <e-time-picker type="timerange" presently confirm @on-ok="onOk" @on-pick-just-now="onPickJustNow" @on-clear="onClear" placeholder="Select time" style="width: 168px" />
  </div>


  <time-picker-md class="markdown-body mg-t-20" />
</template>

<script>
import timePickerMd from '../../docs/time-picker.md';
export default {
  name: "time-picker",
  data() {
    return {
      value1: '11:9:8',
      value2: ['12:0:9', '13:09:34'],
      timeLists: [
        {
          label: '08:00 ~ 09:00',
          value: '08:00 ~ 09:00'
        },
        {
          label: '09:00 ~ 10:00',
          value: '09:00 ~ 10:00'
        },
        {
          label: '10:00 ~ 11:00',
          value: '10:00 ~ 11:00'
        },
        {
          label: '11:00 ~ 12:00',
          value: '11:00 ~ 12:00'
        },
        {
          label: '12:00 ~ 13:00',
          value: '12:00 ~ 13:00'
        },
        {
          label: '13:00 ~ 13:00',
          value: '13:00 ~ 13:00'
        }
      ],
      value3: '09:41:00',
      value4: ['09:41:00', '12:00:00'],

      value5:'',
      value6:[]
    }
  },
  components: {
    timePickerMd
  },
  methods: {
    onChange (val,type,timeStyle) {
      // eslint-disable-next-line
      console.log(val,type,timeStyle )
    },
    onOpenChange(val){
      console.log(val)
    },
    onOk(){
      console.log('确认对话框，ok触发')
    },
    onClear(){
      console.log('取消对话框，cancel触发')
    },
    onClickOutside(){
      console.log('onClickOutside触发')
    },
    onPickJustNow (_data) {
      console.log('///cccccc',_data)
    }
  }
}
</script>

<style scoped>
  .mg-t-20 {
    margin-top: 20px;
  }
  .haloe-select >>> .haloe-icon-clock {
    position: absolute;
    height: 32px;
    line-height: 32px;
    width: 32px;
    color: #999999;
    right: 0;
    top: 0;
  }
  .haloe-select >>> .haloe-icon-arrow-down, .haloe-select-arrow {
    display: none;
  }
  .haloe-select >>> .haloe-select-head-sum {
    display: none;
  }
  .haloe-select >>> .haloe-select-placeholder {
    margin-left: 5px;
  }
  .haloe-select >>> .haloe-select-selected-value {
    margin-left: 5px;
  }
</style>
